<template>
      <ul>
        <li v-for="(item,index) in list" :key="index">
            <input type="checkbox" v-sel="item.checked" />  {{item.name}}
        </li>
    </ul>
    数组定义格式：{{list}}
    <br />
    <button v-on:click="clickall(true)">全选</button>
    <button v-on:click="clickall(false)">取消全选</button>

</template>

<script>
import { reactive, toRefs } from 'vue'

export default {
    setup () {
        const state = reactive({
             list: [{ name: "足球", checked: true }, { name: "篮球", checked: false }, { name: "乒乓球", checked: true }]
        })
        const clickall = (flag) => {
                if (flag) {
                    state.list.forEach(function (v) {
                        v.checked = true;
                    });
                } else {
                    state.list.forEach(function (v) {
                        v.checked = false;
                    });
                }
            }
        return {
            ...toRefs(state),clickall
        }
    },
    directives:{
        sel:{
            updated(el,v) {
                if(v.value){
                    el.checked = true
                } else {
                    el.checked = false
                }
            },
        }
    }
}
</script>

<style lang="scss" scoped>
ul {
    list-style: none;
}
</style>